<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <div class="week">
        <span>第{{dateobj.week}}周：</span>
        <el-date-picker
          type="date"
          v-model="date"
          placeholder="选择日期"
          style="width: 30%;"
          @input="TodayInfo()"
        ></el-date-picker>
      </div>
      <div id="coursesTable"></div>
    </div>
  </div>
</template>
<script>
import studentMainleft from "@/components/studentMainleft";
import Timetables from "timetables";
import { TodayInfo } from "../../static/js/datautils.js";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      dateobj: "",
      date: "",
      input: "",
      timetables: [
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""]
      ],
      timetableType: [
        [{ index: "1", name: "第一大节" }, 2],
        [{ index: "2", name: "第二大节" }, 2],
        [{ index: "3", name: "第三大节" }, 2],
        [{ index: "4", name: "第四大节" }, 2]
      ],
      week: ["周一", "周二", "周三", "周四", "周五"],
      styles: {
        Gheight: 60,
        leftHandWidth: 90,
        palette: ["#ff6633", "#eeeeee"]
      },
      user: null
    };
  },
  created() {
    this.defultdate();
    this.GetCourseById();
    this.ChangeCourseByDate();
  },
  mounted() {
    this.timetable = new Timetables({
      el: "#coursesTable",
      timetables: this.timetables,
      week: this.week,
      timetableType: this.timetableType,
      styles: this.styles
    });
  },
  methods: {
    GetCourseById() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetSchedultByToken,
        params: {
          Token: this.user.Token
        }
      }).then(res => {
        var course = res.data.message;
        var jsoncourse = JSON.stringify(course);
        sessionStorage.setItem("course", jsoncourse);
      });
    },
    //课表渲染
    ChangeCourseByDate() {
      var course = JSON.parse(sessionStorage.getItem("course"));
      var i = 0;
      var week = new Array();
      course.forEach(element => {
        if (element.ScheduleWeekly == this.dateobj.week) {
          week[i++] = element;
        }
      });
      //console.log(week);
      week = Array.from(week);
      //console.log(week);
      week.forEach(element => {
        var w = element.ScheduleWeek;
        var ScheduleWhatat = element.ScheduleWhat * 2 - 1;
        for (var i = ScheduleWhatat; i > ScheduleWhatat - 2; i--) {
          this.timetables[w - 1][i] =
            "课程" +
            element.Course +
            ",老师" +
            element.WorkerId +
            ",教室" +
            element.SchedulePlace;
            if(this.user.StuId == null){
              this.timetables[w - 1][i] = this.timetables[w - 1][i] +"上课班级："+element.ClassId
            }
        }
      });
    },
    defultdate() {
      this.date = new Date();
      var td = TodayInfo(this.date);
      this.dateobj = td;
    },
    //当天日期
    TodayInfo() {
      var td = TodayInfo(this.date);
      this.dateobj = td;
      (this.timetables = [
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""],
        ["", "", "", "", "", "", "", ""]
      ]),
        this.ChangeCourseByDate();
      this.timetable.setOption({
        el: "#coursesTable",
        timetables: this.timetables,
        week: this.week,
        timetableType: this.timetableType,
        styles: this.styles
      });
    }
  }
};
</script>

<style scoped>
.right {
  width: 100%;
  background-color: white;
  min-height: 900px;
  margin-left: 10px;
}
.week {
  margin: 10px 10px;
  display: flex;
  height: 40px;
  line-height: 40px;
}
.main {
  display: flex;
}
</style>
